<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
                >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="addRoles = true">添加角色</el-button>
                </el-col>
                <!-- 角色添加 -->
                <el-dialog
						title="添加角色"
						:visible.sync="addRoles"
						width="50%"
						style="min-width:1000px"
						
					>
						<el-form
                            :model="addRoleList"
							ref="addRolesRef"
							label-width="80px"
                            :rules="addFormRules"
						>
							<el-form-item label="角色名" prop="roleName" required>
								<el-input v-model="addRoleList.roleName"></el-input>
							</el-form-item>
							<el-form-item label="角色介绍" prop="roleDesc" required>
								<el-input v-model="addRoleList.roleDesc"></el-input>
							</el-form-item>
						</el-form>
						<span slot="footer">
							<el-button @click="addRoles = false">取 消</el-button>
							<el-button type="primary" @click="addRoless()">确 定</el-button>
						</span>
				</el-dialog>
            </el-row>
            <!-- 角色列表 -->
            <el-table :data="rolesList" border stripe>
                <el-table-column label="明细" type="expand">
                    <!-- 展开列 -->
                    <template slot-scope="scope">
                        <!-- 渲染一级权限 -->
                        <el-row
                            v-for="(item1, i1) in scope.row.children"
                            :key="item1.id"
                            :class="{
                                bdbottom: true,
                                bdtop: i1 == 0,
                                vcenter: true,
                            }"
                        >
                            <el-col :span="5">
                                <el-tag
                                closable
                                @close="removeRightById(scope.row, item1.id)"
                                >{{ item1.authName }}</el-tag
                                >
                                <i class="el-icon-caret-right"></i>
                            </el-col>
                            <el-col :span="19">
                                <!-- 渲染二级权限 -->
                                <el-row
                                    v-for="(item2, i2) in item1.children"
                                    :key="item2.id"
                                    :class="{ bdtop: i2 != 0, vcenter: true }"
                                    >
                                    <el-col :span="6">
                                        <el-tag
                                        type="success"
                                        closable
                                        @close="removeRightById(scope.row, item2.id)"
                                        >{{ item2.authName }}</el-tag
                                        >
                                        <i class="el-icon-caret-right"></i>
                                    </el-col>
                                    <el-col :span="18">
                                        <!-- 渲染三级权限 -->
                                        <el-tag
                                        type="warning"
                                        closable
                                        v-for="item3 in item2.children"
                                        :key="item3.id"
                                        @close="removeRightById(scope.row, item3.id)"
                                        >
                                        {{ item3.authName }}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button 
                        type="primary" 
                        size="mini" 
                        icon="el-icon-edit"
                        @click="selectRole(scope.row.id)"
                        >编辑</el-button>

                        <el-button 
                        type="danger" 
                        size="mini" 
                        icon="el-icon-delete"
                        @click="removeUser(scope.row.id)"
                        >删除</el-button>

                        <el-button 
                        type="warning" 
                        size="mini" 
                        icon="el-icon-setting"
                        @click="showRightDialog(scope.row)"
                        >分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 角色修改 -->
            <el-dialog
                title="角色修改"
                :visible.sync="modifyRole"
            >
                <el-form
                    :model="modifyForm"
                    :rules="addFormRules"
                    label-width="80px"
                    ref="modifyRoleRef"
                >
                    <el-form-item label="角色名称" prop="roleName" >
                        <el-input v-model="modifyForm.roleName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述" prop="roleDesc" >
                        <el-input v-model="modifyForm.roleDesc" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
				    <el-button @click="modifyRole = false">取 消</el-button>
				    <el-button type="primary" @click="modifyUserInfo()">确 定</el-button>
			    </div>
            </el-dialog>
        </el-card>
        <!-- 分配权限的对话框 -->
        <el-dialog
            title="分配权限"
            :visible.sync="rightDialogVisiable"
            width="50%"
            @close="rightDialogClose"
        >
            <el-tree
                :data="rightsList"
                show-checkbox
                node-key="id"
                :props="treeProps"
                default-expand-all
                :default-checked-keys="defaultKeys"
                ref="treeRef"
            >
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rightDialogVisiable = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="allotRights"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            rolesList: [],
            rightsList:[],
            addRoles:false,
            addRoleList:{
                roleName:'',
                roleDesc:''
            },
            treeProps:{
                label:'authName',
                children:'children'
            },
            rightDialogVisiable:false,
            modifyRole:false,
            addFormRules: {
				roleName: [
					{ required: true, message: "请输入角色名", trigger: "blur" },
					{
						min: 2,
						max: 10,
						message: "用户名的长度在2-10位之间",
						trigger: "blur",
					},
                ],
                roleDesc: [
					{ required: true, message: "请输入角色描述", trigger: "blur" },
					{
						trigger: "blur",
					},
                ],
            },
            modifyForm:{},
            defaultKeys:[]//默认选中的节点ID值数组
        };
    },
    created() {
        this.getRolesList();
    },
    methods: {
        async getRolesList() {
            const { data: res } = await this.$http.get("roles");
            if (res.meta.status != 200) {
                return this.$message.error("获取角色列表失败");
            }
            console.log(res)
            this.rolesList = res.data;
            console.log(this.rolesList);
        },
        addRoless() {
			this.$refs.addRolesRef.validate(async (valid) => {
				if (!valid) return;
                const { data: res } = await this.$http.post("roles", this.addRoleList);
                
				if (res.status !== 201) {
					this.$message.error("添加用户失败");
				}
				this.$message.success("添加用户成功");
				// 关闭对话框
				this.addRoles = false;
				// 重新获取用户列表数据
				this.getRolesList();
			});
        },
        //修改用户发送请求
        async selectRole(id){
            const { data:res } = await this.$http.get('roles/'+id)
            if(res.meta.status !== 200){
                return this.$message.error("查询用户信息失败");
            }
            console.log(res)
            this.modifyRole=true;
            this.modifyForm=res.data;
        },
        //确认修改并提交
        modifyUserInfo(){
            this.$refs.modifyRoleRef.validate(async valid => {
                //判断状态
                if(!valid){
                    return this.$message.error("修改用户信息失败");
                }
                const { data: res } = await this.$http.put('roles/'+this.modifyForm.roleId,{
                    roleDesc:this.modifyForm.roleDesc,
                    roleName:this.modifyForm.roleName,
                })
                console.log(res)
                //判断数据是否请求道
                if (res.meta.status!== 200) {
                    return this.$message.error('修改用户信息失败');
                }
                // 关闭对话框
                this.modifyRole = false;
                this.getRolesList();
                this.$message.success('修改用户信息成功');
            })
        },
        //用户删除(根据id删除)
        removeUser(id) {
            this.$confirm("确定要删除该权限吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(async () => {
                const {data:res} = await this.$http.delete('roles/' + id)
                if(res.meta.status != 200){
                    return this.$message.error('删除角色失败')
                }
                this.$message.success("删除成功!");
                this.getRolesList();
            })
            .catch(() => {
                this.$message.info("已取消删除!");
            });
            
        },
        //// 根据id删除角色下对应的权限
        removeRightById(role,rightId){
            this.$confirm("确定要删除该权限吗", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(async () => {
                const { data: res } = await this.$http.delete(
                  `roles/${role.id}/rights/${rightId}`
                );
                if (res.meta.status != 200) {
                  return this.$message.error("删除权限失败");
                }

                role.children = res.data; // 重新设置当前角色下的最新权限数据，实现刷新
                this.$message.success("删除成功!");
              })
              .catch(() => {
                this.$message.info("已取消删除!");
              });
        },
        async showRightDialog(role){
            //获取所有权限
            const { data: res } = await this.$http.get("rights/tree");
            if(res.meta.status!=200){
                return this.$message.error("失败");
            }
            this.rightsList=res.data;
            // 获取角色下所有三级权限的id
            this.getLeafKeys(role)
            this.roleId=role.id
            this.rightDialogVisiable=true;
        },
        // 获取角色下所有三级权限的id
        getLeafKeys(role){
            // 判断是否为三级权限
            if(!role.children){
                return this.defaultKeys.push(role.id)
            }

            role.children.forEach(item => {
                this.getLeafKeys(item)
            })
        },
        rightDialogClose(){
            // 关闭对话框时，清空选中的节点id值数组
            this.defaultKeys = []
        },
        //分配权限
        async allotRights(){
            const keys = this.$refs.treeRef.getCheckedKeys().concat(this.$refs.treeRef.getHalfCheckedKeys())
            const idStr = keys.join(',')
            // console.log(idStr); 

            const {data:res} = await this.$http.post(`roles/${this.roleId}/rights`,{rids:idStr})
            if(res.meta.status != 200){
                return this.$message.error('分配权限失败')
            }
            this.$message.success('分配权限成功')
            this.getRolesList()
            this.rightDialogVisiable=false
        }
    },
};
</script>
<style lang="less">
.el-tag {
    margin: 6px;
}
.bdtop {
    border-top: 1px solid #eee;
}
.bdbottom {
    border-bottom: 1px solid #eee;
}
.vcenter {
    display: flex;
    align-items: center;
}
</style>